<template>
	<view class="content">
		<view class="top">
			<view class="title">可用学情分</view>
			<view class="branch">{{cionAll}}</view>
			<navigator hover-class="false" class="shop" :url="'../shopStore/index?market_id='+market_id">积分商城</navigator>
			<navigator hover-class="false" class="check" url="study">查看明细</navigator>
		</view>
		<view class="week">
			<view class="week-view">
				<view class="day" v-for="(item,index) in datas" :key="index">
					<view>第{{index+1}}天</view>
					<view class="dayImg" v-if="index < 6">
						<view v-if="item.sign_cion != ''" class="circle-cont">
							<image src="../../static/image/user-center-goldCoin.png"></image>
							<view class="right">
								<image src="../../static/image/user-center-right.png"></image>
							</view>
						</view>
						<view v-else class="circle-none">
							<text>+10</text>
						</view>
					</view>
					<view class="dayImg" v-if="index == 6">
						<view v-if="item.sign_cion == ''" class="over1">
							<image src="../../static/image/user-center-gift.png" class="over" />
						</view>
						<view v-else class="over2">
							<image src="../../static/image/user-center-gift.png" class="over" />
							<view class="right">
								<image src="../../static/image/user-center-right.png"></image>
							</view>
						</view>
					</view>
					<view>{{item.today}}</view>
				</view>
			</view>
			<view class="week-rule">
				<view class="rule-title">签到规则</view>
				<view class="rule-cont">1.每签到1天奖励学情分10分</view>
				<view class="rule-cont">2.连续签到七天额外奖励学情分100分</view>
				<view class="rule-cont">3.每天只可签到1次，如中断，下一次从第一天开始计算</view>
				<view class="rule-cont">4.若发现恶意刷分行为，智学星有权取消兑换资格</view>
				<view class="rule-cont">*以上信息最终解释权归智学星所有</view>
			</view>
			<!-- <view class="week-button" @tap="tiXian">立即提现</view> -->
			<view class="dialogS" :class="{click : is_check}" v-if="index < 7">
				<image src="../../static/image/user-center-success.png" mode=""></image>
				<view class="dialogS-cont">
					<view class="dialogS-title">连续签到第{{index}}天</view>
					<view class="s-cont">
						<image src="../../static/image/user-center-inteB.png" mode=""></image>
						<view class="dialogS-fen">+{{sign_cion}}</view>
					</view>
					<view class="yes" @click="clickYes">确认</view>
				</view>
			</view>
			<view class="dialogS" :class="{click : is_check}" v-else-if="index == 7">
				<image src="../../static/image/user-center-success.png" mode=""></image>
				<view class="dialogS-cont2">
					<view class="dialogS-title">连续签到第{{index}}天</view>
					<view class="s-cont">
						<image src="../../static/image/user-center-inteB.png" mode=""></image>
						<view class="dialogS2-fen">+{{sign_cion}}</view>
					</view>
					<view class="s-cont">
						<image src="../../static/image/user-center-gift.png" mode=""></image>
						<view class="dialogS2-fen">+{{gift_cion}}</view>
					</view>
					<view class="yes" @click="clickYes">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cDate from '../../common/util.js'
	export default {
		data() {
			return {
				datas: [],
				index: 1,
				sign_cion: 10,
				gift_cion: 100,
				is_check: true,
				cionAll: 0,
				market_id:''
			}
		},
		onLoad() {
			this.getUser();
			this.$zapi.apiPost('user/Sign.User/UserSign').then(res => {
				if (res.data.code == 200) {
					this.is_check = false;
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
				this.getList();
			})
			this.getmarketID();
		},
		methods: {
			getList() {
				var myDate = new Date();
				var time = Date.parse(myDate) / 1000;
				var data = {
					stat_limit_time: time
				}
				this.$zapi.apiPost('user/Sign.User/ListSign', data).then(res => {
					if (res.data.code == 200) {
						var datas = res.data.data;
						var data_list = [];
						for (var j = 0; j < 7; j++) {
							var time2 = time - j * 86400;
							for (var i = 0; i < datas.length; i++) {
								var a = Number(datas.length - i - 1);
								if (datas[i].start_time < time2 && datas[i].end_time > time2 && datas[i].sign_type == 1) {
									data_list.push(datas[i]);
									this.index = data_list.length;
									var num = Number(this.index - 1);
									this.sign_cion = data_list[num].sign_cion;
									if (this.index == 7) {
										data_list[6].gift_cion = this.gift_cion;
									}
									continue;
								}
							}
							if (data_list[j] == null) {
								break;
							}
						}
						var data_list2 = [];
						for (var s = 0; s < data_list.length; s++) {
							var a = Number(data_list.length - 1);
							var b = Number(a - s);
							data_list2.push(data_list[b]);
						}
						for (var j = 0; j < 7; j++) {
							if (j < data_list2.length) {
								var today = data_list2[j].start_time;
								data_list2[j].today = cDate.getTodayTime(today);
							} else {
								var b = Number(data_list2.length - 1);
								var obj = {};
								obj.today = cDate.getTodayTime(data_list2[b].start_time + 86400);
								obj.sign_cion = '';
								obj.start_time = Number(data_list2[b].start_time + 86400);
								data_list2[j] = obj;
							}
						}
						this.datas = data_list2;
					}
				})
			},
			getmarketID:function(){
				this.market_id="";
				this.$sapi.apiPost('v1/0/mobile/market/getid',{type:1}).then(res => {
					if(res.data.code==200){
						this.market_id = res.data.data.unid;
					}
				});
			},
			getUser() {
				this.$zapi.apiPost('user/currency.basic/GetUserInfo').then(res => {
					if (res.data.code == 200) {
						this.cionAll = res.data.data.cion;
					}
				})
			},
			clickYes() {
				this.is_check = true;
				this.getList();
				this.getUser();
				this.$forceUpdate();
			},
			tiXian() {
				uni.showToast({
					title: '很抱歉，暂时不能提现',
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	.top {
		height: 280upx;
		width: 100%;
		background: #FF9900;
	}

	.title {
		font-size: 30upx;
		color: #FFFFFF;
		padding-top: 50upx;
		padding-left: 30upx;
	}

	.branch {
		font-size: 60upx;
		color: #FFFFFF;
		padding-left: 30upx;
	}

	.shop {
		margin-top: -170upx;
		position: absolute;
		right: 0;
		height: 56upx;
		line-height: 56upx;
		width: 166upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30upx;
		background: #FFAE33;
		border-bottom-left-radius: 28upx;
		border-top-left-radius: 28upx;
	}

	.check {
		margin-top: -80upx;
		position: absolute;
		right: 0;
		height: 56upx;
		line-height: 56upx;
		width: 166upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30upx;
		background: #FFAE33;
		border-bottom-left-radius: 28upx;
		border-top-left-radius: 28upx;
	}

	.week {
		width: 692upx;
		margin: auto;
	}

	.week-view {
		width: 100%;
		height: 234upx;
		margin-top: -68upx;
		background: #FFFFFF;
		border-radius: 20upx;
		box-shadow: 0upx 12upx 20upx rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-around;
	}

	.day {
		color: #CCCCCC;
		font-size: 26upx;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.dayImg {
		width: 72upx;
		height: 72upx;
		text-align: center;
		border-radius: 50%;
		border: 2upx solid #E5E5E5;
	}

	.circle-cont {
		border-radius: 50%;
	}

	.circle-none {
		background: #FAFAFA;
		color: #999999;
		font-size: 30upx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.dayImg image {
		width: 28upx;
		height: 28upx;
		justify-content: center;
		vertical-align: middle;
	}

	.over {
		width: 40upx !important;
		height: 40upx !important;
		justify-content: center;
		vertical-align: middle;
	}

	.over1 {
		background: #FAFAFA;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.over2 {
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.right {
		width: 28upx;
		height: 28upx;
		line-height: 28upx;
		text-align: center;
		background: #FF9900;
		border-radius: 50%;
		margin-top: -12upx;
		margin-left: 48upx;
	}

	.right image {
		width: 18upx;
		height: 16upx;
		justify-content: center;
		vertical-align: middle;
	}

	.rule-title {
		color: #333333;
		font-size: 36upx;
		font-weight: bold;
		text-align: center;
		margin: 50upx auto 40upx;
	}

	.rule-cont {
		color: #666666;
		font-size: 30upx;
		line-height: 50upx;
	}

	.week-button {
		width: 692upx;
		margin: auto;
		color: #FFFFFF;
		font-size: 34upx;
		background: #FF9900;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		position: fixed;
		bottom: 20upx;
	}

	.dialogS {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		position: fixed;
		top: 0;
		left: 0;
	}

	.dialogS image {
		width: 632upx;
		height: 218upx;
		margin-top: 340upx;
		margin-left: 60upx;
	}

	.dialogS-cont,
	.dialogS-cont2 {
		width: 480upx;
		height: 472upx;
		background: #FFFFFF;
		margin: -140upx auto 0;
		border-bottom-left-radius: 40upx;
		border-bottom-right-radius: 40upx;
	}

	.dialogS-cont2 {
		height: 574upx;
	}

	.dialogS-title {
		color: #999999;
		font-size: 30upx;
		text-align: center;
		padding-top: 60upx;
	}

	.s-cont {
		height: 120upx;
		margin-top: 30upx;
	}

	.dialogS-cont image {
		width: 120upx;
		height: 120upx;
		margin-left: 80upx;
		margin-top: 0;
	}

	.dialogS-cont2 image {
		width: 80upx;
		height: 80upx;
		margin-left: 100upx;
		margin-top: 0;
	}

	.dialogS2-fen {
		color: #666666;
		font-size: 62upx;
		line-height: 1;
		margin-top: -80upx;
		margin-left: 190upx;
	}

	.dialogS-fen {
		color: #666666;
		font-size: 96upx;
		line-height: 1;
		margin-top: -120upx;
		margin-left: 218upx;
	}

	.yes {
		width: 268upx;
		height: 60upx;
		background: #FF9900;
		color: #FFFFFF;
		margin: 70upx auto;
		text-align: center;
		font-size: 30upx;
	}

	.click {
		display: none;
	}
</style>
